#@layer()

#define css()
<link rel="stylesheet" href="#(CPATH)/static/components/bpmn-js/assets/diagram-js.css">
<link rel="stylesheet" href="#(CPATH)/static/components/bpmn-js/assets/bpmn-font/css/bpmn.css">
<style>
    #editor {
        height: 850px;
        background: url() repeat !important;;
    }

    .bjs-powered-by {
        display: none;
    }

    .form-check-input {
        margin-left: -1rem;
    }

    .current-task:not(.djs-connection) .djs-visual > :nth-child(1) {
        stroke: #037bfe !important;
        fill: #ddedff !important;
    }
</style>
#end

#define script()
<script src="#(CPATH)/static/components/bpmn-js/custom/bpmnutils.js"></script>
<script src="#(CPATH)/static/components/bpmn-js/bpmn-viewer.production.min.js"></script>
<script>

    const taskDefinitionId = '#(taskDefinitionId ??)'
    const xml = '#(xmlContent ??)';


    var bpmnJS = new BpmnJS({
        container: '#editor',
    });

    //xml 加载完成
    bpmnJS.get('eventBus').on('import.done', function (e) {
        console.log("import.done!!!!!");
        showTaskColor();
    });


    bpmnJS.importXML(xml);


    bpmnJS.get('eventBus').on('element.click', function (e) {
        console.log("click:", e.element);
    });


    function showTaskColor() {
        var overlays = bpmnJS.get('overlays'),
            canvas = bpmnJS.get('canvas');

        overlays.add(taskDefinitionId, 'note', {
            position: {
                top: -40,
                right: 120
            },
            html: '<div style="min-width: 300px;\n' +
                '    font-size: 16px;\n' +
                '    font-weight: 500;\n' +
                '    color: #037bfe;">当前任务正在执行中...</div>'
        });

        // 添加 css 样式
        canvas.addMarker(taskDefinitionId, 'current-task');
    }


</script>
#end

#define content()

<section class="content">

    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline">

                <div class="card-body p-0">
                    <div id="editor">
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>

#end
